<template>
    <el-card class="card">
        <template #header>
            <div class="card-header">
                <strong>{{ title }}</strong>
                <el-button v-if="allowAdd" type="text" icon="el-icon-plus" @click="addItem">添加</el-button>
            </div>
        </template>
        <div v-if="items.length === 0" class="text-muted">暂无内容，可点击添加。</div>
        <div v-for="(item, index) in items" :key="index" class="form-group">
            <el-input v-model="item.name" placeholder="名称" style="margin-bottom: 5px" />
            <el-input type="textarea" v-model="item.desc" placeholder="描述" :rows="3" style="margin-bottom: 10px" />
            <el-button type="danger" icon="el-icon-delete" @click="removeItem(index)" circle />
        </div>
    </el-card>
</template>

<script>
export default {
    props: {
        title: String,
        type: String,
        items: Array,
        allowAdd: Boolean
    },
    methods: {
        addItem() {
            this.items.push({ name: '', desc: '' })
        },
        removeItem(index) {
            this.items.splice(index, 1)
        }
    }
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-group {
    margin-bottom: 10px;
}

.text-muted {
    color: #999;
    font-size: 13px;
}
</style>
